<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋小游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        #gameInfo {
            margin-bottom: 20px;
            font-size: 20px;
        }
        canvas {
            border: 10px solid #8B4513;
            background-color: #D2B48C;
        }
    </style>
</head>
<body>
    <div id="gameInfo">当前轮到黑棋</div>
    <canvas id="gameCanvas" width="450" height="450"></canvas>
    <script src="gobang.js"></script>
</body>
</html>

<script>
    const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gameInfo = document.getElementById('gameInfo');

const GRID_SIZE = 15;
const CELL_SIZE = 30;
const BOARD_SIZE = GRID_SIZE * CELL_SIZE;
const BORDER_SIZE = 10;

let board = Array.from({ length: GRID_SIZE }, () => Array(GRID_SIZE).fill(0));
let currentPlayer = 1; // 1: 黑棋, -1: 白棋
let gameOver = false;

function drawBoard() {
    ctx.fillStyle = '#D2B48C';
    ctx.fillRect(0, 0, BOARD_SIZE, BOARD_SIZE);

    ctx.strokeStyle = '#8B4513';
    ctx.lineWidth = 1;
    for (let i = 0; i <= GRID_SIZE; i++) {
        ctx.beginPath();
        ctx.moveTo(i * CELL_SIZE, 0);
        ctx.lineTo(i * CELL_SIZE, BOARD_SIZE);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(0, i * CELL_SIZE);
        ctx.lineTo(BOARD_SIZE, i * CELL_SIZE);
        ctx.stroke();
    }
}

function drawPiece(x, y, player) {
    ctx.beginPath();
    ctx.arc(x * CELL_SIZE + CELL_SIZE / 2, y * CELL_SIZE + CELL_SIZE / 2, CELL_SIZE / 2 - 2, 0, 2 * Math.PI);
    ctx.fillStyle = player === 1 ? 'black' : 'white';
    ctx.fill();
    ctx.stroke();
}

function checkWin(x, y, player) {
    const directions = [
        [1, 0], // 水平
        [0, 1], // 垂直
        [1, 1], // 正对角线
        [1, -1] // 反对角线
    ];

    for (let [dx, dy] of directions) {
        let count = 1;
        for (let i = 1; i < 5; i++) {
            const nx = x + dx * i;
            const ny = y + dy * i;
            if (nx >= 0 && nx < GRID_SIZE && ny >= 0 && ny < GRID_SIZE && board[nx][ny] === player) {
                count++;
            } else {
                break;
            }
        }
        for (let i = 1; i < 5; i++) {
            const nx = x - dx * i;
            const ny = y - dy * i;
            if (nx >= 0 && nx < GRID_SIZE && ny >= 0 && ny < GRID_SIZE && board[nx][ny] === player) {
                count++;
            } else {
                break;
            }
        }
        if (count >= 5) {
            return true;
        }
    }
    return false;
}

function checkDraw() {
    return board.every(row => row.every(cell => cell !== 0));
}

function handleClick(event) {
    if (gameOver) return;

    const rect = canvas.getBoundingClientRect();
    const x = Math.floor((event.clientX - rect.left) / CELL_SIZE);
    const y = Math.floor((event.clientY - rect.top) / CELL_SIZE);

    if (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE && board[x][y] === 0) {
        board[x][y] = currentPlayer;
        drawPiece(x, y, currentPlayer);

        if (checkWin(x, y, currentPlayer)) {
            gameInfo.textContent = currentPlayer === 1 ? '黑棋获胜！' : '白棋获胜！';
            gameOver = true;
        } else if (checkDraw()) {
            gameInfo.textContent = '平局！';
            gameOver = true;
        } else {
            currentPlayer = -currentPlayer;
            gameInfo.textContent = currentPlayer === 1 ? '当前轮到黑棋' : '当前轮到白棋';
        }
    }
}

function resetGame() {
    board = Array.from({ length: GRID_SIZE }, () => Array(GRID_SIZE).fill(0));
    currentPlayer = 1;
    gameOver = false;
    gameInfo.textContent = '当前轮到黑棋';
    drawBoard();
}

canvas.addEventListener('click', handleClick);
window.addEventListener('keydown', (event) => {
    if (event.key === 'r' && gameOver) {
        resetGame();
    }
});

drawBoard();
</script>